<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <el-row type="flex" justify="">
          <el-col>
            <el-button size="small" type="primary" @click="show">
              添加房产
            </el-button>
          </el-col>

          <el-row type="flex" justify="end">
            <el-select v-model="pageConsige.agent" placeholder="房产经纪">
              <el-option
                v-for="item in agentList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
            <el-select v-model="pageConsige.category" placeholder="房型分类">
              <el-option
                v-for="item in cateList"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              />
            </el-select>
            <el-input
              v-model="pageConsige.title_contains"
              placeholder="请输入关键字"
            />
          </el-row>
          <el-button size="small" icon="el-icon-search" @click="serch" />
        </el-row>

        <hr>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column width="150" align="center" prop="image" label="封面">
            <template #default="{ row }">
              <img :src="row.image" style="width: 130px; height: 100px">
            </template>
          </el-table-column>
          <el-table-column align="center" prop="title" label="标题" />
          <el-table-column align="center" prop="tags" label="标签">
            <template #default="{row}">
              <el-tag
                v-for="tag in row.tags"
                :key="tag"
              >
                {{ tag }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="address" label="地址" />
          <el-table-column align="center" prop="category.title" label="分类" />
          <el-table-column align="center" prop="agent.name" label="经纪" />
          <el-table-column align="center" prop="price" label="价格" />
          <el-table-column align="center" prop="desc" label="介绍" />
          <el-table-column align="center" width="150" prop="photos" label="图片">
            <template #default="{ row }">
              <img :src="row.photos[0]" style="width: 130px; height: 100px">
            </template>
          </el-table-column>
          <el-table-column width="150" label="操作" fixed="right">
            <template #default="{ row }">
              <el-button
                type="primary"
                size="small"
                @click="edit(row.id)"
              >编辑</el-button>
              <el-button
                type="danger"
                size="small"
                @click="del(row.id)"
              >删除</el-button>
            </template></el-table-column></el-table>

        <!-- 分页组件 -->
        <el-row type="flex" justify="center" align="middle">
          <el-pagination
            layout="prev, pager, next"
            :page-size="pageConsige._limit"
            :total="total"
            :current-page="curPag"
            @current-change="currentChange"
          />
        </el-row>
        <!-- 弹窗组件 -->
        <Addclassify
          ref="fordata"
          :is-show-dialog.sync="isShowDialog"
          @updata="getProList"
          @close="getProCount"
          @show="getProList"
        />
      </el-card>
    </div>
  </div>
</template>

<script>
import Addclassify from './components/add-classify.vue'
import { getProperties, getProCount, delPro } from '@/api/properties'
import { getAngentList } from '@/api/angent'
import { getCategories } from '@/api/category'

export default {
  components: { Addclassify },
  data() {
    return {
      tableData: [],
      isShowDialog: false,
      pageConsige: {
        _limit: 2, // 每页显示条数
        _start: 0 // 总页码

        // v-model 对象形式可以不绑定了
        // title_contains: ''
        // agent: '',
        // category: ''
      },

      total: 0,
      curPag: 1,
      cateList: [],
      agentList: []

    }
  },
  created() {
    this.getProList()
    this.getProCount()
    this.getAngentList()
    this.getCategories()
  },
  methods: {
    async edit(id) {
      // 数据回显
      // this.formData = getProList(id)
      console.log(id)
      this.isShowDialog = true
      await this.$refs.fordata.DetailById(id)
    },
    // 删除房产
    async del(id) {
      // 2次询问
      await this.$confirm('确定删除吗')
      // 发送请求
      await delPro(id)
      // 提醒用户
      this.$message.success('删除成功')
      // 减少页码
      this.getProCount()

      if (this.tableData.length === 1 && this.pageConsige._limit > 1) {
        this.pageConsige._start = 0
        this.curPag--
      }
      // 更新页面
      this.getProList()
    },
    // 添加房产弹窗
    show() {
      this.isShowDialog = true
    },

    // 获取房产列表
    async getProList() {
      const { data } = await getProperties(this.pageConsige)
      this.tableData = data
      console.log('房产列表', data)
    },
    // 显示分页
    async getProCount() {
      const { data } = await getProCount(this.pageConsige)
      console.log(data)
      this.total = data
    },
    // 翻页
    currentChange(newPage) {
      this.pageConsige._start = this.pageConsige._limit * (newPage - 1)
      this.getProList()
      this.getProCount()
    },

    // 搜索
    serch() {
      this.getProList()
      this.getProCount()
    },
    async getAngentList() {
      const { data } = await getAngentList()
      this.agentList = data
      // console.log(184, data)
    },
    async getCategories() {
      const { data } = await getCategories()
      this.cateList = data
      // console.log(187, data)
    }
  }
}
</script>

<style scoped>
hr {
  margin: 20px 0;
}
.el-pagination {
  margin: 30px;
}
.el-input {
  width: 300px;
}
</style>
